/**
 * 这里是uni-app内置的常用样式变量 test
 *
 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 *
 */

/* 颜色变量 */

/* 行为相关颜色 */
$color-primary: #007aff;
$color-info: #5bc0de;
$color-success: #5cb85c;
$color-warning: #f0ad4e;
$color-danger: #e64340;

/* 文字基本颜色 */
$color-text:#333;//主要文字颜色
$color-sub-text:#666;//次级文字颜色
$color-text-inverse:#fff;//反色
$color-gray:#999;//辅助灰色
$color-placeholder: #ccc;
$color-disable:#c0c0c0;

/* 背景颜色 */
$bg-color: #f5f5f5;

/* 边框颜色 */
$border-color:#c8c7cc;

/* 尺寸变量 */
$input-height: 48rpx;
$button-height-sm: 64rpx;
$button-height: 72rpx;
$button-height-lg: 80rpx;

/* 文字尺寸 */
$font-sm:24rpx;
$font-base:28rpx;
$font-lg:32rpx;
$font-xl: 48rpx;


/* Border Radius */
$border-radius-sm: 0rpx;
$border-radius-base: 8rpx;
$border-radius-lg: 16rpx;
$border-radius-circle: 50%;

/* 水平间距 */
$spacing-row-sm: 12rpx;
$spacing-row-base: 24rpx;
$spacing-row-lg: 36rpx;

/* 垂直间距 */
$spacing-col-sm: 12rpx;
$spacing-col-base: 24rpx;
$spacing-col-lg: 36rpx;

$ossImgUrl: 'https://static.oss.meijiabang.com/zzyx/';



@mixin abs($top,$right:null,$bottom:null,$left:null) {
	position: absolute;
	top: $top;
	right: $right;
	bottom: $bottom;
	left: $left;
}

@mixin fixed($top,$right:null,$bottom:null,$left:null) {
	position: fixed;
	top: $top;
	right: $right;
	bottom: $bottom;
	left: $left;
}

@mixin site($left: 0, $right: null) {
    position: absolute;
    left: $left;
    right: $right;
    top: 50%;
	transform: translateY(-50%);
}

@mixin siteCenter() {
    // position: absolute;
    // left: 50%;
    // top: 50%;
	@include abs(50%, 50%);
	transform: translate(50%, -50%);
}

@mixin radius($topL,$topR:null,$bottomR:null,$bottomL:null) {
    $bottomL: #{if($bottomL, $bottomL , if($bottomR, $bottomR, $topL))};
    $bottomR: #{if($bottomR, $bottomR , $topL)};
    $topR: #{if($topR, $topR , $topL)};
	/* #ifdef APP-PLUS-NVUE */
	border-bottom-left-radius:$bottomL;
	border-bottom-right-radius: $bottomR;
	border-top-left-radius: $topL;
	border-top-right-radius: $topR;
	/* #endif */
	/* #ifndef APP-PLUS-NVUE */
	border-radius: $topL $topR $bottomR $bottomL;
	/* #endif */
}

@mixin tst($property: all, $duration: 0.3s, $delay: 0s, $fun: cubic-bezier(0.25, 0.1, 0.25, 1.0)) {
	/* #ifdef APP-PLUS-NVUE */
	transition-property: $property;
	transition-duration: $duration;
	transition-delay: $delay;
	transition-timing-function: $fun;
	/* #endif */
	/* #ifndef APP-PLUS-NVUE */
	transition: all $duration $delay $fun;
	/* #endif */
}

@mixin ellipsis {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis
}

@mixin flex($direction: column) {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: $direction;
}

/**
 * @description iphonex及iphone系列兼容
 * @param {String} $prop属性名字如height，padding
 * @param {String} $num初始高度，只能写一些，不然低版本安卓会出问题
 * @params {String} $area 安全区域位置===》top或者bottom
 * @params {String} $direction 方向（属性的拼接值）如果$prop是padding，它是bottom的话，拼接起来就是padding-bocttom
 * @params {String} $plus 属性的加减，这边会创建出来calc来计算属性
 */
@mixin iosSafeArea($prop: padding, $num: 0px, $area: top, $direction: null, $plus: '+'){
	$newPro: #{$prop}#{if($direction, ('-' + $direction), '')};
	#{$newPro}: #{$num};
	#{$newPro}: calc(#{$num} #{$plus} constant(safe-area-inset-#{$area}));
	#{$newPro}: calc(#{$num} #{$plus} env(safe-area-inset-#{$area}));
}